<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/10
  Time: 18:55
  To change this template use File | Settings | File Templates.
--%>
<%@page isELIgnored="true" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<div class="layui-bg-gray" style="padding: 16px;">
<div class="layui-row layui-col-space30">
    <div class="layui-col-md3">
        <div class="grid-demo">
            <div class="layui-card">
                <div class="layui-card-header">小区</div>
                <div class="layui-card-body">
                    <div id="ID-tree-demo-showLine"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="grid-demo grid-demo-bg1">
            <div class="layui-card">
                <div class="layui-card-header">商品房</div>
                <div class="layui-card-body">
                    <div class="layui-form" id="searchForm" lay-filter="searchForm">

                        <div class="layui-form-item">
                            <label class="layui-form-label">状态:</label>
                            <div class="layui-input-inline">
                                <select name="housestate" lay-filter="housestate">
                                    <option value="0">请选择</option>
                                </select>
                            </div>
                            <label class="layui-form-label">业主:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="ownername" placeholder="输入业主名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">具体住址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="cell" placeholder="单元" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="floorNum" placeholder="楼层" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="houseid" placeholder="房屋编号" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" onclick="search()" >查询</button>
                            </div>
                        </div>
                    </div>

                    <table id="houseTable" lay-filter="houseTables"  class="layui-table layui-table-hover"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<%-- 转租页面--%>
<div id="zuhouse" style="display:none;padding:20px">
    <form class="layui-form" id="zuhouseForm" lay-filter="zuhouseForm">
        <input type="hidden" name="plotid">
        <input type="hidden" name="houseid">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">甲方姓名：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">甲方手机号:</label>
                <div class="layui-input-block">
                    <input type="text" name="ownerphone" placeholder="输入租户手机号" required  class="layui-input" disabled>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">乙方姓名:</label>
            <div class="layui-input-block">
                <input type="text" name="subletname" placeholder="输入租户姓名" required  class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">乙方手机号:</label>
            <div class="layui-input-block">
                <input type="text" name="subletphone" placeholder="输入租户手机号" required  class="layui-input">
            </div>
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号:</label>
            <div class="layui-input-block">
                <input type="text" name="subletcard" placeholder="输入租户身份证号" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间:</label>
            <div class="layui-input-block">
                <input type="date" name="starttime" placeholder="输入几号楼" required  class="layui-input">
            </div>

        </div>
       <%-- <div class="layui-inline">
            <label class="layui-form-label">结束时间:</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
                </div>

            </div>
            <div class="layui-input-inline">
            </div>
        </div>--%>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间:</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="number" name="endmonth" class="layui-input" min="0"  step="1">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="date" name="endtime" placeholder="输入几号楼" required  class="layui-input" disabled="disabled">
                    </div>
                </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">家庭住址:</label>
            <div class="layui-input-block">
                <input type="text" name="subletaddress" placeholder="请输入家庭住址" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
            <label class="layui-form-label">租金:</label>
            <div class="layui-input-block">
                <input type="text" name="subletmoney" placeholder="租金" required  class="layui-input">
            </div>
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">规则:</label>
            <div class="layui-input-block">
                <input type="radio" name="yafu" value="1" title="押一付一" >
                <input type="radio" name="yafu" value="2" title="押一付二">
                <input type="radio" name="yafu" value="3" title="押一付三">
            </div>
        </div>
        <input type="hidden" name="yamoney" placeholder="押金" required  class="layui-input">
    </form>
</div>
</div>
</body>
<%--头部工具栏，添加--%>
<%--<script type="text/html" id="headTool">
    <button class="layui-btn" onclick="add()">添加房屋</button>
</script>
<div id="add" style="display:none;padding:20px">
    <form class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">小区名:</label>
            <div class="layui-input-block">
                <select name="plotid" id="plotnames">
                    <option value="">请选择小区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">楼栋名称:</label>
            <div class="layui-input-block">
                <input type="text" name="floorname" placeholder="输入几号楼" required  class="layui-input">
            </div>
        </div>
    </form>
</div>--%>
<script>
    var $=layui.$
    $.post("/property/housestate").then(({data})=>{
        $(data).each(function (i,e){
            let option = $("<option value='"+e.id+"'>"+e.statename+"</option>");
            $("[name=housestate]").append(option);
        });
        //重新渲染下拉列表
        layui.form.render('select');
    })

    layui.use(function(){
        var tree = layui.tree;
        let table=layui.table;
      /*  $.get('/property/treelist')
            .then(({data})=>{
                console.log(data);
            })*/
        // 模拟数据
        $.get('/property/treelist')
            .then(({data})=>{
                console.log(data)
                //渲染tree树状组件
                layui.tree.render({
                    elem: '#ID-tree-demo-showLine',
                    id:"aaaa",
                    data: data,
                    showLine: false , // 是否开启连接线
                   click:function (obj){
                        var plotname = obj.data.title;
                      var floorid= JSON.stringify(obj.data.id)
                       console.log(plotname)
                        table.render({
                            id:"one",
                            elem:"#houseTable",
                            url:'/property/house/show?plotname='+plotname+"&floorid="+floorid,
                            toolbar:"#headTool",
                           page:true,
                           cols:[[
                               {field:'number',align: 'center',type:'numbers',title:"编号"},
                               {field:'id',align: 'center',hide:true,title:"序号"},
                               {field:'plotid',align: 'center',title:"小区名",templet(r){
                                   return r.plot.plotname;
                                   }},
                               {field:'floorid',align: 'center',title:"楼栋名",templet(r) {
                                       return r.floormanager.floorname;
                                   }},
                               {field:'cell',align: 'center',title:"具体地址",templet(r) {
                                       return r.cell+r.floornum+r.houseid
                                   }},
                               {field:'',align: 'center',title:"房屋状态",templet(r) {
                                       return r.storestate==null?"-":r.storestate.statename;
                                   }},
                               {field:'userid',align: 'center',title:"业主",templet(r) {
                                       return r.owners== null?"-" : r.owners.ownername;
                                   }},
                               {fixed: 'right', title:'操作',templet(r) {
                                   if(r.storestate.id==2){
                                           return "<a class='layui-btn layui-btn-xs layui-btn-danger'lay-event='recycle'>出租中</a> <button lay-event='expPdf' class='layui-btn layui-btn-xs layui-btn-success'>签署</button>"
                                       }else if(r.storestate.id==1){
                                           return "<a class='layui-btn layui-btn-xs layui-btn-normal'>占用</a> <button id='lotid' lay-event='zhuanzu' class='layui-btn layui-btn-xs'>转租</button>"
                                       }else{
                                           return "-"
                                       }
                                   }}
                           ]]
                       })
                   },
                })
            });
        //监听行工具栏事件
        table.on("tool(houseTables)",function (obj){
            if(obj.event == "zhuanzu"){
                sell(obj)
            }else if(obj.event=="recycle"){
                recycle(obj);
            }else if(obj.event=="expPdf"){
                expPdf(obj);
            }
        })
    });
    function sell(obj){
        $("#zuhouseForm")[0].reset();
        //先赋值
        layui.form.val('zuhouseForm',{
            "plotid":obj.data.plot.id,
            "houseid":obj.data.id,
            "name":obj.data.owners.ownername,
            "ownerphone":obj.data.owners.ownerphone
        });
        //弹窗
        layui.layer.open({
            type : 1,
            title : "转租",
            area:["770px","500px"],
            content: $("#zuhouse"),
            icon : 3,
            btn:["确定","取消"],
            yes(){

                var val=$('input:radio[name="yafu"]:checked').val();
                if(val==null){
                    alert("请选择规则!");
                    return false;
                }else{
                    var subletmoney = $("[name=subletmoney]").val();
                    $("[name=subletmoney]").val(parseInt(subletmoney)*parseInt(val));
                    var zuhouseForm = layui.form.val("zuhouseForm");
                //发送ajax请求
                $.post("/property/zucount/update",zuhouseForm)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
                }


            }
        });
    }
  /*  function  recycle(obj){
        console.log(obj.data);
        layui.layer.open({
            type : 0,
            title : "提示",
            area:["260px","180px"],
            content:"确定回收吗？",
            icon : 3,
            btn:["确定","取消"],
            yes(){
                $.get("/property/shouhouse?id="+obj.data.id+"&ownerid="+obj.data.owners.id)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    })
            }
        });
    }*/
    function  recycle(obj){
        console.log(obj.data);
        layui.layer.open({
            type : 0,
            title : "提示",
            area:["260px","180px"],
            content:"确定回收吗？",
            icon : 3,
            btn:["确定","取消"],
            yes(){
                $.post("/property/shoucount/update?id="+obj.data.id)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
            }
        });
    }
   /* //点击添加
    function add(){
        layui.layer.open({
            type : 1,
            title : "提示",
            area:["500px","300px"],
            content: $("#add"),
            icon : 3,
            btn:["确定","取消"],
            yes(){
                //通过表单序列化，获取输入的内容
                let addForm = layui.form.val("addForm");
                //发送ajax请求
                $.post("/property/floor/add",addForm)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
            }
        });
    }*/
    function zhuanzu(obj){

    }
    function expPdf(obj){
        var data = obj.data.id;
        console.log(data)
     layui.layer.open({
         title:"租赁合同",
         content:"/property/househetong?id="+data,
         type:2,
         area:["500px","500px"],
         maxmin:true
     })
    }

    $("[name=endtime]").blur(function (){
        var startDateStr =$("[name=starttime]").val();
        var endDateStr = $("[name=endtime]").val();
        // 将日期字符串转换为 Date 对象
        var startDate = new Date(startDateStr);
        var endDate = new Date(endDateStr);

        // 计算两个日期之间的天数差
        var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
        var daysDiff = timeDiff / (1000 * 3600 * 24);

        //计算两个日期之间的月数
        // 获取开始日期和结束日期的年份和月份
        var startYear = startDate.getFullYear();
        var startMonth = startDate.getMonth();
        var endYear = endDate.getFullYear();
        var endMonth = endDate.getMonth();

        // 计算完整月数
        var monthsDiff = (endYear - startYear) * 12 + endMonth - startMonth;
        // 四舍五入天数差
        var roundedDaysDiff = Math.round(daysDiff);

        if(monthsDiff<1){
            layui.layer.msg("最低月份不能小于一个月")
            $("[name=endtime]").val("");
        }
    })
    //点击去查询
    function search(){
        //获取表单的值,表单序列化
        var where = layui.form.val('searchForm');
        console.log(where)
        //条件查询，重载表格因为键和值都是where，所以可以值保留键
        layui.table.reload('one',{where});
    }
</script>

<script>
    $("[name=starttime]").blur(function (){
        var s= $("[name=starttime]").val()
        var date = new Date();
        var dates = new Date(s);

        if(dates<date){
            $("[name=starttime]").val("")
            layui.layer.msg("不能小于当前时间")
        }
    } )
    $("[name=endmonth]").blur(function (){
        var starttime = $("[name=starttime]").val();
        console.log(starttime);
        if(starttime!='' && starttime!=null){
            var jieshuyuefen = $("[name=endmonth]").val();
            var startdatetime = new Date(starttime); // 将日期加一个月
            startdatetime.setMonth(startdatetime.getMonth()+1+parseInt(jieshuyuefen));
            var year = startdatetime.getFullYear();
            var month = startdatetime.getMonth();
            var date = startdatetime.getDate();
            console.log(year+'-'+month+'-'+date)
            var datetime = year + '-' + (month > 9?(month + "") : ("0" + month))+ '-' + (date>9?(date + "") : ("0" + date));
            $("[name=endtime]").val(datetime);
        }else {
            $("[name=endmonth]").val("");
            layui.layer.msg("请先选择开始租赁时间")
        }

    })

    $("[name=subletmoney]").blur(function (){
        $("[name=yamoney]").val($("[name=subletmoney]").val());
    })
</script>
</html>
